const path = require('node:path')

const getFunctionSlotStr = codeConfig => {
  const {
    exportExcelApiConfig,
    importExcelApiConfig,
    addApiConfig,
    downloadImportTemplateApiConfig
  } = codeConfig.apiConfigStates

  const btnStr = []
  if (addApiConfig) {
    btnStr.push(`
      <el-button
        v-auth="'${codeConfig.moduleName}Add'"
        type="primary"
        @click="handler.onAdd()"
      >
        新增
      </el-button>
    `)
  }
  // 导入
  if (importExcelApiConfig) {
    btnStr.push(`
      <cs-dialog-import
        v-auth="'${codeConfig.moduleName}Import'"
        :upload-api="${importExcelApiConfig.funcName}"
        ${
          downloadImportTemplateApiConfig ?
            `:download-api="${downloadImportTemplateApiConfig.funcName}"` :
            ''
        }
        @success="handler.refreshListHandler(true)"
      />
    `)
  }
  if (exportExcelApiConfig) {
    btnStr.push(`
      <el-button
        v-auth="'${codeConfig.moduleName}Export'"
        type="primary"
        :loading="store.exportExcelLoading"
        @click="handler.onExportExcel()"
      >
        导出
      </el-button>
    `)
  }

  btnStr.push(`
  <!-- 导出 -->
  <!-- <gl-dialog-export
    v-auth="'${codeConfig.moduleName}Export'"
    :api="apiExport"
    :export-query="{...store.query, exportIds:store.exportIds}"
    :before-create="handler.onExportBeforeCreate"
  /> -->
    `)


  return btnStr.length > 0 ?
    `
    <template #function>
      ${btnStr.join('\n')}
    </template>` :
    ''
}

// 创建页面vue文件
module.exports = (codeConfig, utils) => {
  const { hasRowActions, hasModifyDialog, importExcelApiConfig, downloadImportTemplateApiConfig } =
    codeConfig.apiConfigStates
  const code = `
    <template>
      <layout-basic-page>
        <cs-list-page
          ref="listPageRef"
          row-key="${codeConfig.rowKey}"
          :query="store.query"
          :data="store.tableData"
          :total="store.total"
          :search-items="searchItems"
          :table-columns="tableColumns"
          :row-actions="rowActions"
          index-fixed
          show-select
          has-setting
          setting-cache="${codeConfig.moduleName}"
          @selection-change="handler.onSelectionChange"
          @search="handler.onSearch"
        >
          ${getFunctionSlotStr(codeConfig)}
        </cs-list-page>
        ${hasModifyDialog ? '<dialog-modify @submit="handler.modifySubmitHandler" />' : ''}
      </layout-basic-page>
    </template>
    <script lang="ts" setup>
      import { useHandler, useSearch, useStore, useTable } from './hooks'
      // import * as apiExport from '/@/api${codeConfig.apiFilePath}/export'
      import { toRef } from 'vue'
      ${hasModifyDialog ? 'import DialogModify from \'./components/dialog-modify.vue\'' : ''}
      ${
        importExcelApiConfig ?
          `import {${importExcelApiConfig.funcName}, ${
              downloadImportTemplateApiConfig?.funcName || ''
            }} from '/@/api${codeConfig.apiFilePath}'` :
          ''
      }


      defineOptions({ name: '${codeConfig.moduleName}' })
      const store = useStore()
      const listPageRef = toRef(store, 'listPageRef')
      const handler = useHandler(store)
      const { searchItems } = useSearch()
      const { tableColumns, rowActions } = useTable(${hasRowActions ? 'handler' : ''})
    </script>
  `
  utils.writeFile(path.join(codeConfig.modulePath, 'index.vue'), code)
}
